<template lang="pug">
    ul.menu
        template(v-for="menu in menus")
            li.menu-item(:class="{'folder-menu':menu.hasChildren,open:menu.open,active:menu.active}",@click="menuHandler(menu.url,menu.hasChildren,menu.title)") 
                i(:class="['fa','fa-'+menu.icon]")
                span {{menu.title}}
            li.submenu-container(v-if="menu.hasChildren")
                div.shadow
                ul.submenu
                    li.submenu-item(v-for="submenu in menu.children",:class="{active:submenu.active}")
                        span {{submenu.title}}
</template>
<script>
    import {mapState,mapActions} from 'vuex';
    import store from './store.js';
    export default {
        store,
        computed:mapState(['menus']),
        methods: {
            menuHandler(url,hasChildren,title) {
                if(url)
                    this.$router.push(url);
                if(hasChildren)
                    this.$store.commit('collapse',title);
            },
            ...mapActions(['activeMenu'])
        },
        watch: {
          "$route": "activeMenu"
        }
    }

</script>
<style lang="less">
    @activeColor:#1976D2;
    .menu {
        list-style: none;
        margin: 8px 0;
        padding: 0;
        line-height: 1rem;
        .menu-item {
            padding: 0.7rem 1rem 0.7rem 2.2rem;
            cursor: pointer;
            border-bottom: 1px solid #CCC;
            position: relative;
            &:not(:first-child){
                border-top: 1px solid #FFF;
            }
            &.folder-menu::after{
                font:normal normal normal 20px/1 FontAwesome;
                content: '\f107';
                display: inline-block;
                float: right;
            }
            &.active{
                background-color: rgba(207,216,220,0.24);
                color: @activeColor;
            }
              &.open+li.submenu-container{
                    display: block;
                 }
            .fa{
                width:30px;   
            }
        }
        .submenu-container{
             display: none;
             position: relative;
             overflow: hidden;
            .submenu{
                border-bottom: 1px solid #CCC;
                list-style: none;
                padding: 0;
                font-size:0.8rem;
                background-color: #dfe5e7;
                position: relative;
                .submenu-item{
                    padding: 0.3rem 1rem 0.3rem 2.2rem;
                    cursor:pointer;
                    &.active{
                        background-color: rgba(207,216,220,0.87);
                        color: @activeColor;
                    }
                    &:hover{
                        background-color: rgba(255,255,255,0.24);
                        color: @activeColor;
                    }
                }
            }
            .shadow{
                width: 100%;
                height: 1px;
                box-shadow: 0 3px 6px #6b6b6b;
                z-index: 10;
                position: absolute;
                top: -2px;
            }
        }
    }
</style>